// flex弹性布局函数
.flex(@justify: center,@align:center,@wrap:nowrap,@direction:row) {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex;

  justify-content: @justify;
  align-items: @align;
  flex-wrap: @wrap;
  flex-direction: @direction;
}

// 内联块级flex弹性布局函数
.inlineFlex(@justify: center,@align:center,@wrap:nowrap,@direction:row) {
  display: inline-flex;
  justify-content: @justify;
  align-items: @align;
  flex-wrap: @wrap;
  flex-direction: @direction;
}

/*
* 清除加粗样式
*/
.clearBord() {
  font-weight: normal;
}
/*
* 清除padding和margin
*/
.clearPM() {
  padding: 0;
  margin: 0;
}
.rightArrow() {
  width: 0.16rem;
  height: 0.32rem;
}
/**
 *背景图片
 *@url图片地址（不带后缀）
 *@type图片类型（默认png）
 *@repeat重复类型（默认不重复）
 *@p1背景定位（默认center）
 *@p2 背景定位 （默认center）
 * @s1 背景大小 （默认100%）
 * @s 2背景大小 （默认100%）
 */
.backgroundImg(@url,@type:".png",@repeat:no-repeat,@p1:center,@p2:center,@s1:100%,@s2:100%) {
  background-image: url("@{url}@{type}");
  background-repeat: @repeat;
  background-position: @p1 @p2;
  background-size: @s1 @s2;
}

/*
 * 1px 方案
 */
.setTopLine(@c:#DCDCDC) {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid @c;
  color: @c;
  transform-origin: 00;
  transform: scaleY(0.5);
}

.setBottomLine(@c:#DCDCDC) {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid @c;
  color: @c;
  transform-origin: 0100%;
  transform: scaleY(0.5);
}

.setLeftLine(@c:#DCDCDC) {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1pxsolid @c;
  color: @c;
  transform-origin: 00;
  transform: scaleX(0.5);
}
.setRightLine(@c: #DCDCDC) {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid @c;
  color: @c;
  transform-origin: 100% 0;
  transform: scaleX(0.5);
}
.setLine(@c: #DCDCDC, @radius: 0) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 1px;
  border: 1px solid @c;
  border-radius: @radius * 3;
  color: @c;
  height: 200%;
  box-sizing: border-box;
  transform-origin: left top;
  transform: scale(0.5);
}
.tetris-1px,
.tetris-1px-t,
.tetris-1px-b,
.tetris-1px-tb,
.tetris-1px-l,
.tetris-1px-r {
  position: relative;
}
.tetris-1px {
  &:before {
    .setLine;
  }
}
.tetris-1px-t {
  &:before {
    .setTopLine();
  }
}
.tetris-1px-b {
  &:after {
    .setBottomLine();
  }
}
.tetris-1px-tb {
  &:before {
    .setTopLine();
  }
  &:after {
    .setBottomLine();
  }
}
.tetris-1px-l {
  &:before {
    .setLeftLine();
  }
}
.tetris-1px-r {
  &:after {
    .setRightLine();
  }
}
.tetris-1px-b-15 {
  &:after {
    left: 15px;
  }
}
// 京东税延
.tetris-jd-1px-b {
  position: relative;
  &:after {
    .setBottomLine(@c:#eeeeee);
  }
}

.tetris-jd-1px-b-15 {
  position: relative;
  &:after {
    .setBottomLine(@c:#eeeeee);
    left: 15px;
  }
}
// 表单样式
.components-form {
  position: relative;
  &.border {
    &::after {
      .setBottomLine;
      border-color: #d7d7d7;
    }
  }
  &.padding {
    padding: 00.4rem;
    background: #fff;
  }
  ::v-deep.van-cell {
    padding: 0.4rem;
    font-size: 0.426667rem;
    color: #333333;
    .v-cell-righ;
  }
  ::v-deep.van-field {
    font-size: 0.426667rem;
    padding: 0.253333rem0;
    align-items: center;
    .van-field__label {
      color: inherit;
    }

    .van-field__control {
      color: #666;
      height: 0.7rem;
      line-height: 0.7rem;
      &:disabled,
      &[disabled],
      &.disabled {
        -webkit-text-fill-color: #666;
        color: #666;
        -webkit-opacity: 1;
        opacity: 1;
      }

      &::placeholder {
        font-size: 0.426667rem;
        color: #999;
      }
      &:disabled::placeholder,
      &[disabled]::placeholder,
      &.disabled::placeholder {
        color: #999;
        -webkit-text-fill-color: #999;
      }
    }
    &.van-field--disabled {
      .van-field__label {
        color: #666;
      }
    }
  }
  ::v-deep.van-picker__confirm {
    color: inherit;
  }
}
.default-form-cell {
  padding: 0.253333rem 0;
  font-size: 0.426667rem;
  color: #333333;
  .v-cell-righ;
  ::v-deep .van-cell__right-icon {
    line-height: 0.7rem;
  }
  ::v-deep .van-cell__value {
    line-height: 0.75rem;
    color: #bebebe;
  }
  &.default-form-cell-value {
    ::v-deep .van-cell__value {
      color: #333333;
    }
    &:after {
      border-color: #dcdcdc;
    }
  }
}
.v-cell-righ() {
  ::v-deep .van-cell__value {
    color: #666;
    color: inherit;
    height: 0.7rem;
    line-height: 0.7rem;
  }
  ::v-deep .van-cell__title {
    span {
      color: #333333;
    }
  }
  ::v-deep .van-cell__right-icon {
    color: #c1c1c1;
    margin-left: 0;
    height: 0.6rem;
    width: 0.193333rem;
    line-height: 0.6rem;
    margin-right: -0.106667rem;
    transform: scale(0.9);
  }
}
// vant自带弹窗样式修改
.common-dialog {
  box-shadow: 00.053333rem 0.106667rem 0 rgba(128, 128, 128, 0.26);
  border-radius: 0.08rem;
  color: #333333;
  font-size: 0.373333rem;
  .van-dialog__content--isolated {
    min-height: unset;
  }
  .van-dialog__message {
    padding: 0.533333rem 0.4rem 0.4rem;
  }
  .van-hairline--top::after {
    border-color: #d8d8d8;
  }
  .van-button {
    font-size: 0.426667rem; /*32/75*/
  }
  .van-dialog__confirm,
  .van-dialog__confirm:active {
    color: #1989fa;
  }
}
// vant自带弹窗样式修改
.common-dialog {
  box-shadow: 00.053333rem 0.106667rem 0 rgba(128, 128, 128, 0.26);
  border-radius: 0.08rem;
  color: #333333;
  font-size: 0.373333rem;
  .van-dialog__content--isolated {
    min-height: unset;
  }
  .van-dialog__message {
    padding: 0.533333rem 0.4rem 0.4rem;
  }
  .van-hairline--top::after {
    border-color: #d8d8d8;
  }
  .van-button {
    font-size: 0.426667rem; /*32/75*/
  }
  .van-dialog__confirm,
  .van-dialog__confirm:active {
    color: #1989fa;
  }
}
